<!-- 章节练习 -->

<template>
  <div class="ExamPractice-page">
    <div class="ExamPractice-head">{{Qsindex + 1}}/{{dataList.length}}</div>
    <div class="examPractice-box" v-for="(item, index) in dataList">
        <div class="examPractice-box-t">
          <span class="box-t-title">{{index+1}}、【{{item.question.type_name}}】{{ item.question.title }}</span>
          <img src="@/assets/icon/star.png" alt="" v-if="item.is_fav == 0" @click="clickToBookmark(item)">
          <img src="@/assets/icon/star-active.png" alt="" v-if="item.is_fav == 1" @click="clickToBookmark(item)">
        </div>
        <div class="examPractice-box-c">
          <div class="box-c-exam">
            <div class="box-c-exam-item" v-for="(qitem, qindex) in item.question.option"  @click="slectAn(index, qindex)">
              <div class="check-up" :class="{ checkActive: isSelect(item, item.answer, getIndex(qindex))}">
                <div class="check-active-in"></div>
              </div>
              <div :class="{ active: isSelect(item, item.answer, getIndex(qindex))}">
                <span class="">{{ getIndex(qindex) }}、</span>
                <span>{{ qitem.content }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="examPractice-box-b">
          <div class="box-b-btn-ss">
            <div class="box-b-btn" @click="handelClick(item)">解 析</div>
            <div class="box-b-btn-q" @click="multiNext(1)" v-if="item.question_type == '2'">确认</div>
          </div>
          <div class="box-b-content" v-if="item.question.analysisShow">
            <div class="box-b-content-t">正确答案：{{ item.question.answer}}</div>
            <div class="box-b-content-b"><span class="span1">解析︰</span><span v-html="item.question.analysis"></span></div>
          </div>
        </div>
    </div>
    <div class="subject_box-bt-l">
      <div class="subject_box-bt-r-btn" @click="multiNext(2)">下一题</div>
      <div class="subject_box-bt-r-btn" style="margin-right: 10px" @click="multiPrevious">上一题</div>
    </div>
<!--    <el-empty v-else description="暂无数据"></el-empty>-->
  </div>
</template>

<script>
import dataInfo from "../../utils/dataInfo";
import {favoriteTopic, getSubmitAnswer, getSubmitTheTestPaper} from "@/api";
export default {
  name: "examPractice",
  props: {
    dataList: {
      type: Array,
      default: []
    },
    paperId: {
      type: Number,
      default: 0
    },
    recordId: {
      type: Number, // 点击
      default: 0
    },
    Qsindex: {
      type: Number, // 点击
      default: 0
    }
  },
  data() {
    return {
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    handelClick(item) {
      item.question.analysisShow = !item.question.analysisShow
    },
    // 选项字母
    getIndex(n) {
      return String.fromCharCode(n + 65)
    },

    isSelect(e, answer, answer2) {
      if (e.question.question_type == 2) {
        return answer.indexOf(answer2) != -1
      } else {
        return answer === answer2
      }
    },
    slectAn(index, n) {
      this.Qsindex = index
      this.$emit('send', index);
      let item = this.dataList[index];
      if (item.question.question_type != 2) {
        item.answer = this.getIndex(n);
        this.subAnser();
      } else {
        let arr = item.answer || [];
        let currentOptions = this.getIndex(n);
        if (typeof arr == 'string') {
          arr = item.answer.split(',');
        }
        let arrIndex = arr.indexOf(currentOptions);
        if (arrIndex > -1) {
          arr.splice(arrIndex, 1)
        } else {
          arr.push(this.getIndex(n))
        }
        item.answer = arr.join(",")
        // this.subAnser();
      }
    },
    // 点击每题答案提交
    subAnser() {
      // let itemInfo = this.dataList[this.Qsindex]
      // let answer = this.dataList[this.Qsindex].answer;
      // let arr = this.dataList[this.Qsindex].answer.split(',')
      // if (!answer) {
      //   return
      // }
      // if (itemInfo.question.question_type == 2) {
      //   if (arr.length < 2) {
      //     return;
      //   }
      // }

      let that = this;
      let answer = that.dataList[that.Qsindex].answer;
      if (!answer) {
        // if (this.Qsindex + 1 < this.dataList.length) {
        //   that.Qsindex--
        // }
        return
      }
      if (that.dataList[that.Qsindex].question.question_type == 2) {
        if (answer.split(',').length<2) {
          // this.$message.warning('至少选择两个选项！')
          // that.isShow = true
          // if (this.Qsindex + 1 < this.dataList.length) {
          //   that.Qsindex--
          // }
          return;
        }
      }
      let id = this.dataList[this.Qsindex].id;
      let params = {
        id: id,
        answer: answer
      }
      getSubmitAnswer(params).then(res => {
        if (res.code == 1) {
          if (res.data.is_submit) {
            this.submitClick()
          }
          this.$emit('getData')
        }
      })
    },

    /* 上一题*/
    multiPrevious() {
      if (this.Qsindex > 0) {
        this.$emit('onchange', 1)
      }
    },
    /* 下一题 */
    multiNext(n) {
      if (this.Qsindex + 1 < this.dataList.length) {
        if (n == 1) {
          this.subAnser();
        } else {
          this.$emit('onchange', 2)
        }
      } else {
        this.subAnser();
      }
    },
    // 确认交卷
    submitClick() {
      let params = {record_id: this.recordId}
      getSubmitTheTestPaper(params).then(res => {
      })
    },
    // 点击是否收藏
    clickToBookmark(item) {
      let params = {
        paper_id: this.paperId,
        question_id: item.question_id,
        paper_question_id: item.paper_question_id,
      }
      favoriteTopic(params).then(res => {
        if (res.code == 1) {
          item.is_fav = !item.is_fav
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ExamPractice-page {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  font-family: PingFang SC, PingFang SC;
  .active {
    color: #3582E5;
  }
  .check-up {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #9F9F9F;
    margin-right: 10px;
  }
  .checkActive {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #9F9F9F;
    margin-right: 10px;
    .check-active-in {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin: 2px auto;
      background: #3582E5;
      border: 1px solid #3582E5;
    }
  }
  .ExamPractice-head {
    text-align: center;
    margin-bottom: 10px;
    color: #666666;
  }
}
</style>
